<template>
	<!-- 财富——基金频道 -->
	<view class="wealth-fund">
		<!-- 基金搜索框 -->
		<view class="header-background">
			<view class="header-search">
				<image src="../../static/wealthFund/search.png" class="search-img"></image>
				<input class="search-input" text="type" placeholder="搜索相关页面" />
			</view>
		</view>
		<!-- 导航图标 -->
		<view class="nav-icon-box">
			<view class="first-row">
				<view class="nav-icon-item" v-for="item in iconItems1" :key="item.id">
					<image :src="item.icon" class="icon-img"></image>
					<text class="icon-text">{{item.title}}</text>
				</view>
			</view>
			<view class="second-row">
				<view class="nav-icon-item" v-for="item in iconItems2" :key="item.id">
					<image :src="item.icon" class="icon-img"></image>
					<text class="icon-text">{{item.title}}</text>
				</view>
			</view>
		</view>
		<!-- 中间banner大图 -->
		<view class="wealth-fund-banner">
			<image src="../../static/wealthFund/banner-img.png" class="banner-img"></image>
		</view>
		<!-- 基金主要板块 -->
		<view class="fund-module">
			<!-- 稳健优选模块 -->
			<view class="fund-module-item">
				<!-- 稳健优选标题 -->
				<view class="item-title">
					<view class="title-left">
						<view class="item-title-icon"></view>
						<text class="item-title-text">稳健优选</text>
						<text class="item-little-title-text">适合新手投资 稳中求进</text>
					</view>
					<image src="../../static/wealthFund/to-img.png" class="item-title-img"></image>
				</view>
				<!-- 稳健优选主体内容 -->
				<view class="item-body">
					<view class="item-sub-title">
						<view class="sub-title-item active">
							稳中进取
						</view>
						<view class="sub-title-item">
							安稳增值
						</view>
						<view class="sub-title-item">
							活期理财
						</view>
					</view>
					<view class="item-sub-body">
						<view class="sub-title-item">
							<image src="../../static/wealthFund/zoushitu-short.png" class="sub-item-left-img"></image>
							<view class="sub-item-left">
								<text class="text-percent">11.76%</text>
								<text class="text-year">近一年</text>
							</view>
							<view class="sub-item-right">
								<text class="big-title">股债双利 理财升级</text>
								<text class="little-title">汇添富双利券A</text>
							</view>
						</view>
						<view class="sub-title-item">
							<image src="../../static/wealthFund/zoushitu-short.png" class="sub-item-left-img"></image>
							<view class="sub-item-left">
								<text class="text-percent">18.97%</text>
								<text class="text-year">近一年</text>
							</view>
							<view class="sub-item-right">
								<text class="big-title">攻守有道</text>
								<text class="little-title">中银多策略灵活配置混合A</text>
							</view>
						</view>
						<view class="sub-title-item">
							<image src="../../static/wealthFund/zoushitu-short.png" class="sub-item-left-img"></image>
							<view class="sub-item-left">
								<text class="text-percent">8.74%</text>
								<text class="text-year">近一年</text>
							</view>
							<view class="sub-item-right">
								<text class="big-title">理财新手首选</text>
								<text class="little-title">广发趋势优选灵活配置混合A</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 收益进取模块 -->
			<view class="fund-module-item">
				<!-- 收益进取标题 -->
				<view class="item-title">
					<view class="title-left">
						<view class="item-title-icon"></view>
						<text class="item-title-text">收益进取</text>
						<text class="item-little-title-text">收益进阶，历史业绩亮眼</text>
					</view>
					<image src="../../static/wealthFund/to-img.png" class="item-title-img"></image>
				</view>
				<!-- 收益进取主体内容 -->
				<view class="item-body">
					<view class="item-sub-title">
						<view class="sub-title-item active">
							绩优股基
						</view>
						<view class="sub-title-item">
							精选指数
						</view>
						<view class="sub-title-item">
							布局海外
						</view>
					</view>
					<view class="item-sub-body-2">
						<view class="sub-title-item">
							<image src="../../static/wealthFund/zoushitu-long.png" class="sub-item-left-img"></image>
							<view class="sub-item-right-text">
								<view class="right-text-top">
									<view class="top-first-row">
										<text class="first-row-title">投研副总挂帅</text>
										<!-- 分隔符 -->
										<view class="first-row-spilt"></view>
										<text class="first-row-title">聚焦新能源</text>
									</view>
									<text class="bottom-row-title">中欧先进制造股票C</text>
								</view>
								<view class="right-text-bottom">
									<view class="pernet-year">
										<text class="percent">95.46%</text>
										<text class="year">近一年</text>
									</view>
									<view class="pernet-year">
										<text class="percent">167.72%</text>
										<text class="year">近三年</text>
									</view>
									<view class="pernet-year">
										<text class="percent">154.87%</text>
										<text class="year">成立以来</text>
									</view>
								</view>
							</view>
						</view>

						<view class="sub-title-item">
							<image src="../../static/wealthFund/zoushitu-long.png" class="sub-item-left-img"></image>
							<view class="sub-item-right-text">
								<view class="right-text-top">
									<view class="top-first-row">
										<text class="first-row-title">消费</text>
										<!-- 分隔符 -->
										<view class="first-row-spilt"></view>
										<text class="first-row-title">四获金牛萧楠</text>
									</view>
									<text class="bottom-row-title">易方达消费行业股票</text>
								</view>
								<view class="right-text-bottom">
									<view class="pernet-year">
										<text class="percent">80.366%</text>
										<text class="year">近一年</text>
									</view>
									<view class="pernet-year">
										<text class="percent">119.29%</text>
										<text class="year">近三年</text>
									</view>
									<view class="pernet-year">
										<text class="percent">416.20%</text>
										<text class="year">成立以来</text>
									</view>
								</view>
							</view>
						</view>

						<view class="sub-title-item">
							<image src="../../static/wealthFund/zoushitu-long.png" class="sub-item-left-img"></image>
							<view class="sub-item-right-text">
								<view class="right-text-top">
									<view class="top-first-row">
										<text class="first-row-title">2020翻倍基</text>
										<!-- 分隔符 -->
										<view class="first-row-spilt"></view>
										<text class="first-row-title">掘金港股洼地</text>
									</view>
									<text class="bottom-row-title">南方香港成长灵活配置混合</text>
								</view>
								<view class="right-text-bottom">
									<view class="pernet-year">
										<text class="percent">107.78%</text>
										<text class="year">近一年</text>
									</view>
									<view class="pernet-year">
										<text class="percent">142.45%</text>
										<text class="year">近三年</text>
									</view>
									<view class="pernet-year">
										<text class="percent">161.60%</text>
										<text class="year">成立以来</text>
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>

			<!-- 新发基金模块 -->
			<view class="fund-module-item">
				<!-- 新发基金标题 -->
				<view class="item-title">
					<view class="title-left">
						<view class="item-title-icon"></view>
						<text class="item-title-text">新发基金</text>
					</view>
					<image src="../../static/wealthFund/to-img.png" class="item-title-img"></image>
				</view>
				<!-- 新发基金主体内容 -->
				<scroll-view scroll-x="true" enable-flex="true" class="item-body">
					<view class="item-sub-body-3">
						<view class="sub-title-item">
							<text class="item-head">华夏科创 50ETI</text>
							<view class="item-tab-text">
								<text class="tab-item-1">首批科创链接</text>
								<text class="tab-item-2">指数投资专家</text>
							</view>
							<view class="person-date">
								<view class="person">
									<image src="../../static/wealthFund/head-img.png" class="person-img"></image>
									<text class="person-name">杨宇宁</text>
								</view>
								<view class="date">
									<text class="date-item">认购截止日</text>
									<text class="date-item">2021-4-6</text>
								</view>
							</view>
							<!-- 右上角图标 -->
							<view class="sale-now">
								正在售卖
							</view>
						</view>

						<view class="sub-title-item">
							<text class="item-head">华夏科创 50ETI</text>
							<view class="item-tab-text">
								<text class="tab-item-1">首批科创链接</text>
								<text class="tab-item-2">指数投资专家</text>
							</view>
							<view class="person-date">
								<view class="person">
									<image src="../../static/wealthFund/head-img.png" class="person-img"></image>
									<text class="person-name">杨宇宁</text>
								</view>
								<view class="date">
									<text class="date-item">认购截止日</text>
									<text class="date-item">2021-4-6</text>
								</view>
							</view>
							<!-- 右上角图标 -->
							<view class="sale-now">
								正在售卖
							</view>
						</view>

						<view class="sub-title-item">
							<text class="item-head">华夏科创 50ETI</text>
							<view class="item-tab-text">
								<text class="tab-item-1">首批科创链接</text>
								<text class="tab-item-2">指数投资专家</text>
							</view>
							<view class="person-date">
								<view class="person">
									<image src="../../static/wealthFund/head-img.png" class="person-img"></image>
									<text class="person-name">杨宇宁</text>
								</view>
								<view class="date">
									<text class="date-item">认购截止日</text>
									<text class="date-item">2021-4-6</text>
								</view>
							</view>
							<!-- 右上角图标 -->
							<view class="sale-now">
								正在售卖
							</view>
						</view>

					</view>
				</scroll-view>
			</view>

			<!-- 咨询要闻模块 -->
			<view class="fund-module-item">
				<!-- 咨询要闻标题 -->
				<view class="item-title">
					<view class="title-left">
						<view class="item-title-icon"></view>
						<text class="item-title-text">咨询要闻</text>
					</view>
					<image src="../../static/wealthFund/to-img.png" class="item-title-img"></image>
				</view>
				<!-- 咨询要闻主体内容 -->
				<view class="item-body">
					<view class="item-sub-body-4">
						<view class="sub-title-item">
							<view class="sub-item-left-text">
								<text class="left-big-title">来了来了！科创50ETF链接基金重磅新发</text>
								<view class="left-little-title">
									<text class="little-title-item">祥瑞金融资讯</text>
									<text class="little-title-item">1833浏览</text>
								</view>
							</view>
							<image src="../../static/wealthFund/news-img1.png" class="right-img"></image>
						</view>

						<view class="sub-title-item">
							<view class="sub-item-left-text">
								<text class="left-big-title">来了来了！科创50ETF链接基金重磅新发</text>
								<view class="left-little-title">
									<text class="little-title-item">祥瑞金融资讯</text>
									<text class="little-title-item">1833浏览</text>
								</view>
							</view>
							<image src="../../static/wealthFund/news-img1.png" class="right-img"></image>
						</view>
					</view>
				</view>
			</view>

		</view>
		<!-- 加载更多 -->
		<view class="load-more" v-if="true">
			<view v-if="true" class="txt">加载更多...</view>
			<view v-else class="txt">到底了!!!</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				iconItems1: [{
						id: 1,
						icon: "../../static/wealthFund/jijinpaihang.png",
						title: "基金排行",
					},
					{
						id: 2,
						icon: "../../static/wealthFund/renqirexiao.png",
						title: "人气热销",
					},
					{
						id: 3,
						icon: "../../static/wealthFund/touguzuhe.png",
						title: "投顾组合",
					},
					{
						id: 4,
						icon: "../../static/wealthFund/xinfajijin.png",
						title: "新发基金",
					},
					{
						id: 5,
						icon: "../../static/wealthFund/gushou.png",
						title: "固守+",
					}
				],
				iconItems2: [{
						id: 6,
						icon: "../../static/wealthFund/touzifengxiang.png",
						title: "投资风向",
					},
					{
						id: 7,
						icon: "../../static/wealthFund/huobijijin.png",
						title: "货币基金",
					},
					{
						id: 8,
						icon: "../../static/wealthFund/zhishujijin.png",
						title: "指数基金",
					},
					{
						id: 9,
						icon: "../../static/wealthFund/zhutitouzhi.png",
						title: "主体投资",
					},
					{
						id: 10,
						icon: "../../static/wealthFund/mubiaoyin.png",
						title: "目标盈",
					}
				]
			};
		},
		// 下拉加载更多
		onReachBottom() {},
	}
</script>

<style lang="scss" scoped>
	.wealth-fund {
		.header-background {
			height: 240rpx;
			background-color: #3476F1;
			padding: 0rpx 24rpx;
			border-bottom-left-radius: 30rpx;
			border-bottom-right-radius: 30rpx;

			.header-search {
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				border-radius: 30rpx;
				height: 60rpx;

				.search-img {
					width: 24rpx;
					height: 24rpx;
					margin-right: 16rpx;
				}

				.search-input {
					width: 180rpx;
					font-size: 24rpx;
					color: #ccc;
				}
			}
		}

		.nav-icon-box {
			height: 236rpx;
			margin: -140rpx 24rpx 40rpx;
			border-radius: 12rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			padding: 40rpx 24rpx 36rpx;
			box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.1);

			.first-row {
				display: flex;
				justify-content: space-between;
				margin-bottom: 36rpx;

				.nav-icon-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.icon-img {
						width: 48rpx;
						height: 48rpx;
						margin-bottom: 20rpx;
					}

					.icon-text {
						font-size: 24rpx;
						color: #666;
					}
				}
			}

			.second-row {
				display: flex;
				justify-content: space-between;

				.nav-icon-item {
					display: flex;
					flex-direction: column;
					align-items: center;

					.icon-img {
						width: 48rpx;
						height: 48rpx;
						margin-bottom: 20rpx;
					}

					.icon-text {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}

		.wealth-fund-banner {
			padding: 0 24rpx;
			height: 200rpx;
			border-radius: 12rpx;
			margin-bottom: 40rpx;

			.banner-img {
				width: 100%;
				height: 100%;
			}
		}

		.fund-module {
			.fund-module-item {
				padding: 0 24rpx;

				.item-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 24rpx;

					.title-left {
						display: flex;
						align-items: center;

						.item-title-icon {
							width: 8rpx;
							height: 30rpx;
							margin-right: 10rpx;
							border-radius: 6rpx;
							background-color: #3476f1;
						}

						.item-title-text {
							font-size: 32rpx;
							font-weight: bold;
							margin-right: 10rpx;
						}

						.item-little-title-text {
							font-size: 20rpx;
							color: #999;
						}
					}

					.item-title-img {
						width: 17rpx;
						height: 30rpx;
					}
				}

				.item-body {
					margin-bottom: 40rpx;

					.item-sub-title {
						display: flex;
						margin-bottom: 18rpx;

						.sub-title-item {
							width: 148rpx;
							height: 52rpx;
							margin-right: 60rpx;
							font-size: 28rpx;
							color: #999;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.active {
							background-color: #3476F1;
							border-radius: 8rpx;
							color: #fff;
						}
					}

					// 模块样式1：适用于稳健优选
					.item-sub-body {
						border-radius: 12rpx;
						box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.1);

						.sub-title-item {
							height: 130rpx;
							padding: 30rpx;
							border-bottom: 2rpx solid rgba($color: #000000, $alpha: 0.03);
							display: flex;
							justify-content: flex-start;
							align-items: center;

							&:last-child {
								border-bottom: none;
							}

							.sub-item-left-img {
								width: 70rpx;
								height: 70rpx;
								margin-right: 20rpx;
							}

							.sub-item-left {
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								margin-right: 128rpx;

								.text-percent {
									font-size: 28rpx;
									color: #f85656;
									font-weight: bold;
									margin-bottom: 18rpx;
								}

								.text-year {
									font-size: 24rpx;
									color: #333;
								}
							}

							.sub-item-right {
								display: flex;
								flex-direction: column;
								align-items: flex-start;

								.big-title {
									font-size: 28rpx;
									color: #333;
									font-weight: bold;
									margin-bottom: 18rpx;
								}

								.little-title {
									font-size: 24rpx;
									color: #999;
								}
							}
						}
					}

					// 模块样式2：适用于收益进取
					.item-sub-body-2 {
						border-radius: 12rpx;
						box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.1);

						.sub-title-item {
							height: 240rpx;
							padding: 30rpx;
							border-bottom: 2rpx solid rgba($color: #000000, $alpha: 0.03);
							display: flex;
							justify-content: flex-start;
							align-items: center;

							&:last-child {
								border-bottom: none;
							}

							.sub-item-left-img {
								width: 98rpx;
								height: 142rpx;
								margin-right: 20rpx;
							}

							.sub-item-right-text {
								display: flex;
								flex-direction: column;
								align-items: flex-start;
								justify-content: space-between;

								.right-text-top {
									display: flex;
									flex-direction: column;
									align-items: flex-start;
									margin-bottom: 30rpx;

									.top-first-row {
										display: flex;
										justify-content: flex-start;
										align-items: center;

										.first-row-title {
											font-size: 28rpx;
											color: #333;
											font-weight: bold;
										}

										.first-row-spilt {
											width: 6rpx;
											height: 28rpx;
											border-radius: 3rpx;
											background-color: rgba($color: #999, $alpha: 0.3);
											margin: 0 10rpx;
										}
									}

									.bottom-row-title {
										font-size: 24rpx;
										color: #999;
										margin-top: 14rpx;
									}
								}

								.right-text-bottom {
									display: flex;

									.pernet-year {
										display: flex;
										flex-direction: column;
										align-items: flex-start;
										margin-right: 30rpx;

										&:first-child {
											.percent {
												color: #f85656;
											}

											.year {
												color: #333;
											}
										}

										.percent {
											font-size: 36rpx;
											color: #333;
											font-weight: bold;
										}

										.year {
											font-size: 24rpx;
											color: #999;
										}
									}
								}
							}
						}
					}

					// 模块样式3：适用于新发基金
					.item-sub-body-3 {
						display: flex;
						padding: 24rpx 2rpx;

						.sub-title-item {
							min-width: 530rpx;
							height: 200rpx;
							padding: 30rpx;
							border-radius: 12rpx;
							box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.1);
							position: relative;
							margin-right: 14rpx;

							&:last-child {
								margin-right: none;
							}

							.item-head {
								font-size: 28rpx;
								color: #333;
								font-weight: bold;
							}

							.item-tab-text {
								margin-top: 18rpx;
								display: flex;
								justify-content: flex-start;
								margin-right: 6rpx;
								margin-bottom: 50rpx;

								.tab-item-1 {
									font-size: 20rpx;
									color: #be7f22;
									width: 140rpx;
									height: 34rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									background-color: rgba($color: #be7f22, $alpha: 0.1);
									border-radius: 4rpx;
									margin-right: 6rpx;
								}

								.tab-item-2 {
									font-size: 20rpx;
									color: #3476f1;
									width: 140rpx;
									height: 34rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									background-color: rgba($color: #3476f1, $alpha: 0.1);
									border-radius: 4rpx;
								}
							}

							.person-date {
								display: flex;
								align-items: center;
								justify-content: space-between;

								.person {
									display: flex;
									align-items: center;

									.person-img {
										width: 54rpx;
										height: 54rpx;
										margin-right: 12rpx;
									}

									.person-name {
										font-size: 28rpx;
										color: #333;
									}
								}

								.date {
									.date-item {
										font-size: 24rpx;
										color: #999;
										margin-right: 8rpx;

										&:last-child {
											margin-right: none;
										}
									}
								}
							}

							.sale-now {
								position: absolute;
								top: 0;
								right: 0;
								width: 94rpx;
								height: 36rpx;
								background-color: #f85656;
								color: #fff;
								font-size: 20rpx;
								border-top-left-radius: 12rpx;
								border-bottom-right-radius: 12rpx;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
					}

					// 模块样式4：适用于资讯要闻
					.item-sub-body-4 {
						border-radius: 12rpx;
						box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.1);

						.sub-title-item {
							height: 220rpx;
							padding: 30rpx;
							border-bottom: 2rpx solid rgba($color: #000000, $alpha: 0.03);
							display: flex;
							justify-content: space-between;
							align-items: center;

							&:last-child {
								border-bottom: none;
							}

							.sub-item-left-text {
								max-width: 400rpx;
								display: flex;
								flex-direction: column;
								align-items: flex-start;

								.left-big-title {
									font-size: 28rpx;
									color: #333;
									font-weight: bold;
									line-height: 44rpx;
									margin-bottom: 46rpx;
								}

								.left-little-title {
									.little-title-item {
										font-size: 24rpx;
										color: #999;
										margin-right: 20rpx;
									}
								}
							}

							.right-img {
								height: 154rpx;
								width: 208rpx;
							}
						}
					}


				}
			}
		}

		.load-more {
			margin: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.txt {
				font-size: 28rpx;
				color: #999;
			}
		}
	}
</style>
